package com.gin.kotlin.gf2gamecommunity.routes

import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import androidx.navigation.toRoute
import androidx.paging.compose.collectAsLazyPagingItems
import com.gin.kotlin.gf2gamecommunity.R
import com.gin.kotlin.gf2gamecommunity.app.App
import com.gin.kotlin.gf2gamecommunity.base.composable.Loading
import com.gin.kotlin.gf2gamecommunity.base.util.copyText
import com.gin.kotlin.gf2gamecommunity.composable.TopicLazyColumn
import com.gin.kotlin.gf2gamecommunity.navi.GF2Navigator
import com.gin.kotlin.gf2gamecommunity.viewmodel.ThemeViewModel
import kotlinx.coroutines.launch
import kotlinx.serialization.Serializable


fun NavGraphBuilder.themeDetail(navigator: GF2Navigator) = composable<ThemeDetailRoute>(
    // 从屏幕右侧进入，持续500毫秒
    enterTransition = { slideInHorizontally(tween(500)) { it } },
    // 从屏幕右侧退出，持续500毫秒
    exitTransition = { slideOutHorizontally(tween(500)) { it } },
) {
    ThemeDetailComposable(route = it.toRoute(), navigator = navigator)
}

@Serializable
data class ThemeDetailRoute(val themeId: Int)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ThemeDetailComposable(route: ThemeDetailRoute, navigator: GF2Navigator, viewModel: ThemeViewModel = viewModel()) {
    val themeDetailState = viewModel.themeDetail.fetch(route.themeId).observeAsState()
    val lazyPagingItems = viewModel.topicList.fetch(route.themeId).collectAsLazyPagingItems()
    val lazyListState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    val context = LocalContext.current
    navigator.apply {
        Scaffold(
            topBar = {
                TopAppBar(navigationIcon = {
                    IconButton(onClick = { onPopBackStack() }) {
                        Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "后退")
                    }
                }, actions = {
                    IconButton(onClick = {
                        context.copyText("${App.HOST}/themeInfo?id=${route.themeId}", "已复制地址")
                    }) {
                        Icon(painterResource(R.drawable.ic_content_copy_24), contentDescription = "复制地址")
                    }
                    IconButton(onClick = {
                        lazyPagingItems.refresh()
                        coroutineScope.launch { lazyListState.scrollToItem(0, 0) }
                    }) {
                        Icon(imageVector = Icons.Filled.Refresh, contentDescription = "刷新")
                    }
                }, title = {
                    Text(themeDetailState.value?.data?.name ?: "话题详情")
                })
            },

            ) { paddingValues ->
            val modifier = Modifier.padding(paddingValues)
            Column(verticalArrangement = Arrangement.spacedBy(8.dp), modifier = modifier
                .fillMaxSize()
                .padding(8.dp)) {
                themeDetailState.value?.data?.let { ThemeItem(it) } ?: Loading()
                HorizontalDivider()

                TopicLazyColumn(lazyPagingItems = lazyPagingItems, onNavigateToCommentList = { r -> onNavigateToCommentList(r) }, state = lazyListState, toppedTopics = null)
            }
        }
    }
}
